import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {DatePicker} from "../../../../packages";
import {Space} from "antd";

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {
      year: '2020',
      month: '2023-02',
      date: '2023-01-04',
      quarter: '2023-04',
      week: '2023-01-11',
    } as any
  });

  return () => (
    <DemoRow title="基本用法">
      <Space direction="vertical">
        <div><DatePicker picker="year" width="200px" v-model={state.formData.year}/> {JSON.stringify(state.formData.year)}</div>
        <div><DatePicker picker="month" width="200px" v-model={state.formData.month}/> {JSON.stringify(state.formData.month)}</div>
        <div><DatePicker width="200px" v-model={state.formData.date}/> {JSON.stringify(state.formData.date)}</div>
        <div><DatePicker picker="quarter" width="200px" v-model={state.formData.quarter}/> {JSON.stringify(state.formData.quarter)}</div>
        <div><DatePicker picker="week" width="200px" v-model={state.formData.week}/> {JSON.stringify(state.formData.week)}</div>
      </Space>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    formData: {
      year: '2020',
      month: '2023/02',
      date: '2023/01/04',
      quarter: '2023/04',
      week: '2023/01/11',
    } as any
  });

  return () => (
    <DemoRow title="格式化字符串">
      <Space direction="vertical">
        <div><DatePicker displayFormat="YYYY年" valueFormat="YYYY" picker="year" width="200px" v-model={state.formData.year}/> {JSON.stringify(state.formData.year)}</div>
        <div><DatePicker displayFormat="YYYY年MM月" valueFormat="YYYY/MM" picker="month" width="200px" v-model={state.formData.month}/> {JSON.stringify(state.formData.month)}</div>
        <div><DatePicker displayFormat="YYYY年MM月DD日" valueFormat="YYYY/MM/DD" width="200px" v-model={state.formData.date}/> {JSON.stringify(state.formData.date)}</div>
        <div><DatePicker displayFormat="YYYY年第Q季度" valueFormat="YYYY/MM" picker="quarter" width="200px" v-model={state.formData.quarter}/> {JSON.stringify(state.formData.quarter)}</div>
        <div><DatePicker displayFormat="gggg年第ww周" valueFormat="YYYY/MM/DD" picker="week" width="200px" v-model={state.formData.week}/> {JSON.stringify(state.formData.week)}</div>
      </Space>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const state = reactive({
    formData: {
      year: { start: null as any, end: null as any },
      month: { start: null as any, end: null as any },
      date: { start: null as any, end: null as any },
      quarter: { start: null as any, end: null as any },
      week: { start: null as any, end: null as any },
    } as any
  });

  return () => (
    <DemoRow title="范围选择">
      <Space direction="vertical">
        <div><DatePicker range picker="year" width="300px" v-model:start={state.formData.year.start} v-model:end={state.formData.year.end}/> {JSON.stringify(state.formData.year)}</div>
        <div><DatePicker range picker="month" width="300px" v-model:start={state.formData.month.start} v-model:end={state.formData.month.end}/> {JSON.stringify(state.formData.month)}</div>
        <div><DatePicker range width="300px" v-model:start={state.formData.date.start} v-model:end={state.formData.date.end}/> {JSON.stringify(state.formData.date)}</div>
        <div><DatePicker range picker="quarter" width="300px" v-model:start={state.formData.quarter.start} v-model:end={state.formData.quarter.end}/> {JSON.stringify(state.formData.quarter)}</div>
        <div><DatePicker range picker="week" width="300px" v-model:start={state.formData.week.start} v-model:end={state.formData.week.end}/> {JSON.stringify(state.formData.week)}</div>
      </Space>
    </DemoRow>
  );
});

export const demo4 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="日期多选">
      <Space direction="vertical">
        <div>
          <DatePicker placeholder="选择年" width="200px" picker="year" v-model={state.formData.year} multiple/>
          <span>{JSON.stringify(state.formData.year)}</span>
        </div>
        <div>
          <DatePicker placeholder="选择月" width="200px" picker="month" v-model={state.formData.month} multiple/>
          <span>{JSON.stringify(state.formData.month)}</span>
        </div>
        <div>
          <DatePicker placeholder="选择日" width="200px" picker="date" v-model={state.formData.date} multiple/>
          <span>{JSON.stringify(state.formData.date)}</span>
        </div>
        <div>
          <DatePicker placeholder="选择周" width="200px" picker="week" v-model={state.formData.week} multiple/>
          <span>{JSON.stringify(state.formData.week)}</span>
        </div>
        <div>
          <DatePicker placeholder="选择季度" width="200px" picker="quarter" v-model={state.formData.quarter} multiple/>
          <span>{JSON.stringify(state.formData.quarter)}</span>
        </div>
      </Space>
    </DemoRow>
  );
});

export const demo5 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="日期多选:arraystring">
      <DatePicker width="200px" v-model={state.formData.name} multiple valueType="arraystring"/>
      <span>{JSON.stringify(state.formData.name)}</span>
    </DemoRow>
  );
});


export const demo6 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="日期多选,格式化值">
      <DatePicker
        width="200px"
        v-model={state.formData.name}
        multiple
        valueType="arraystring"
        displayFormat="YYYY年MM月DD日"
        valueFormat="YYYYMMDD"
      />
      <span>{JSON.stringify(state.formData.name)}</span>
    </DemoRow>
  );
});
